
<template>
  <div>
    <el-card class="box-card present_card">
      <div class="present">实时现状</div>
      <div class="pre_card">
        <i>
          <h2>注册会员人数</h2>
          <h1>126</h1>
        </i>
        <i>
          <h2>注册会员人数</h2>
          <h1>126</h1>
        </i>
        <i>
          <h2>注册会员人数</h2>
          <h1>126</h1>
        </i>
      </div>
      <div class="data_analysis">数据分析</div>
      <div class="echarts">
        <el-card class="data_download">
          <h1>下载分布</h1>
          <!--为echarts准备一个具备大小的容器dom-->
          <div id="main" class="echarts1" style="width: 340px;height: 340px;"></div>
        </el-card>
        <!-- 下载分布 -->
        <el-card class="data_vip present_zx">
          <h1>会员分布</h1>
          <span>单位/人</span>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="本周" name="first">
              <!--为echarts准备一个具备大小的容器dom-->
              <div id="zx" style="width: 794px;height: 400px;"></div>
            </el-tab-pane>
            <el-tab-pane label="本月" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="年度" name="three">配置管理</el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      opinion: ["男", "女", "未知"],
      opinionData: [
        { value: 335, name: "男" },
        { value: 310, name: "女" },
        { value: 310, name: "未知" },
        { value: 310, name: "11" }
      ],
      xdata: ["6/11", "6/12", "6/13", "6/14", "6/15", "6/16"],
      adata: [1, 3, 8, 5, 4, 2],
      bdata: [4, 2, 8, 7, 5, 7],
      cdata: [8, 5, 6, 6, 2, 6],
      // 默认选中切换
      activeName: "first"
    };
  },
  methods: {
    //   饼状图
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: this.opinion
        },
        series: [
          {
            name: "性别",
            type: "pie",
            radius: ["50%", "70%", "30%", "20%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "blod"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.opinionData
          }
        ]
      });
    },
    // 条形图
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // data: ['累计确诊','累计死亡','累计治愈']//图例
          data: ["月会员", "季会员", "年会员"] //图例
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          //横坐标
          name: "日期",
          type: "category",
          boundaryGap: false,
          data: this.xdata
        },
        yAxis: {
          name: "数量",
          type: "value",
          min: 0,
          max: 8,
          interval: 2
        },
        //三条折线就有三种series，可以更改type以改变是否为折线
        series: [
          {
            name: "月会员",
            type: "line",
            data: this.adata,
            color: "#5AAEF3"
          },
          {
            name: "季会员",
            type: "line",
            data: this.bdata,
            color: "#62D9AD"
          },
          {
            name: "年会员",
            type: "line",
            data: this.cdata,
            color: "#5B6E96"
          }
        ]
      });
    },
    // 点击切换
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  //调用
  mounted() {
    this.$nextTick(function() {
      this.drawPie("main");
      this.drawLine("zx");
    });
  }
};
</script>
<style scoped>
* {
  list-style: none;
}
.echarts {
  /* display: inline-block; */
  display: flex;
}
.data_download .echarts1 {
  margin: 30px;
}
.data_vip {
  /* display: inline-block; */
  width: 888px;
  height: 472px;
  margin-left: 32px;
}
.data_vip {
  flex: 1;
  width: 974px;
  margin-top: 22px;
}
.el-tabs {
  display: inline;
}
.present_zx {
  position: relative;
}
.present_zx h1 {
  float: left;
}
.present_zx span {
  display: block;
  position: absolute;
  top: 33px;
  left: 160px;
  width: 56px;
  height: 19px;
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #757575;
}
.pre_card h2,.pre_card h1 {
  color: #fff;
}
.present_card {
  padding: 25px;
}
.present,.data_analysis {
  font-size: 20px;
}
</style>
